<template>

    <div class="common-layout">
      <el-container>
        <el-aside width="200px"style="height: 500px; margin-left: 100px;background-color: rgb(245,245,245);">
          <img src="/头像.jpg" style="width: 100px;margin-top: 30px;border: 1px solid grey;border-radius: 5px">
          <p>欢迎回来:<span style="font-size: 30px">张三</span></p>

          <el-aside width="100%" style="height: 260px;">
            <el-scrollbar height="270px" @click="reloads()">
              <router-link :to="'/userdetail?id='+item.id" style="text-decoration: none;color: #333" v-for="item in Arr" >
                <p  :key="item" class="scrollbar-demo-item">  <el-button type="primary" plain style="width: 200px;height: 50px;">{{item.name}}</el-button></p>
              </router-link>
            </el-scrollbar>
          </el-aside>
        </el-aside>


        <el-main  style="height: 500px;margin:0 100px 0 20px;background-color: rgb(245,245,245)">
          <div v-if="id==null">

            <el-icon style="font-size: 150px;opacity: 0.1;margin-top: 80px"><Avatar /></el-icon>
            <p style="font-size: 30px">欢迎<span style="font-size: 40px;color: red">张三</span>回到个人主页</p>
          </div>
            <div v-if="id==1">
              <p style="font-size:30px ">关注<span style="color: red">0</span>个房源</p>
              <el-icon style="font-size: 150px;opacity: 0.1"><HomeFilled /></el-icon>
              <p>未关注房源...</p>
            </div>
          <div v-if="id==2">
            <p style="font-size:30px ">关注<span style="color: red">0</span>个小区</p>
            <el-icon style="font-size: 150px;opacity: 0.1"><OfficeBuilding /></el-icon>
            <p>未关注任何小区...</p>
          </div>
          <div v-if="id==3">
            <p style="font-size:30px ">我的搜索为:<span style="color: red">0</span></p>
            <el-icon  style="font-size: 150px;opacity: 0.1"><Search /></el-icon>
            <p>未发现搜索记录...</p>
          </div>
          <div v-if="id==4">
            <p style="font-size:30px ">我的账户信息</p>
            <div style="width: 100%;height: 40px;background-color:rgb(200,200,200)">
              <p style="font-size: 30px;color: grey;margin-left: -800px">修改密码</p>
            </div>
            <div style="margin-top: 20px">
              <span>输入旧密码:</span>
              <el-input v-model="passwords.oldPassword" style="width: 300px;" placeholder="旧密码" />
            </div>
            <div style="margin-top: 20px">
            <span>输入新密码:</span>
            <el-input v-model="passwords.newPassword" style="width: 300px;" placeholder="新密码" />
            </div>
            <div style="margin-top: 20px">
            <span>确认新密码:</span>
            <el-input v-model="passwords.newPasswordTwo" style="width: 300px;" placeholder="新密码确认" />
            </div>
            <div style="margin-top: 20px">
            <el-button @click="submits()">确认修改</el-button>
            </div>
            <div style="color: grey;margin-left: 700px">
              <p>如需<span style="color: red">注销用户</span>,请练习客服解决</p>
              <p>客服联系电话:12345678900</p>
            </div>

          </div>

          <div v-if="id==5">
            <p>租房地址：北京市朝阳区</p>
            <p>租房时间：2024年4月</p>
            <p>房租：5000元/月</p>
            <el-button @click="details()">跳转租房详情</el-button>
          </div>
        </el-main>
      </el-container>
    </div>

</template>

<script setup>
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import {ref} from "vue";
import router from "@/router";

const passwords=ref({
  phoneNumber:15324133316,
  oldPassword:'',
  newPassword:'',
  newPasswordTwo:''
});
const Arr=[
  {name:"关注房源",id:1},
  {name:"关注小区",id:2},
  {name:"我的搜索",id:3},
  {name:"编辑资料",id:4},
  {name:"我的租房",id:5},

];

const reloads=()=>{
  location.reload();
}
const id=new URLSearchParams(location.search).get('id');
console.log(id);

const submits=()=>{
  console.log(passwords.value);
  let data=qs.stringify(passwords.value);
  console.log(data);
  axios.post('http://localhost:17090/passport/updatePassword',data)
      .then((response)=>{
        if(response.data.code==20001){
          ElMessage.success('修改成功');
          location.href='/userdetail?id=4';
        }else {
          ElMessage.error(response.data.msg);
        }
      })


}
const details=()=>{

  router.push('/detail');
}

</script>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
}
</style>